<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 30px;
            outline: none;
        }
        
        p {
            display: none;
            color: red;
            font-size: 12px;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <!-- 有一个密码输入框，要求输入内容：大小写字母开头，数字、大小写字母、下划线组成的长度为6~16位的字符组成。
    如果用户输入的内容不符合这个规则，则在输入框下面显示错误信息。 -->
    <div>
        请输入密码：<input type="password" name="" id="">
    </div>
    <p>请输入大小写字母开头，数字、大小写字母、下划线组成的长度为6~16位的字符</p>
    <script>
        var input = document.querySelector('input');
        var p = document.querySelector('p');
        let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,16}$/;
        input.addEventListener('focus', function() {
            this.style.border = '1px solid green';
        })
        input.addEventListener('blur', function() {
            // this.style.border='1px solid red';
            if (this.value.match(reg)) {
                this.style.border = '1px solid green';
                p.style.display = 'none'

            } else {
                this.style.border = '1px solid red';
                p.style.display = 'block'
            }
        })
    </script>
</body>

</html>